import { useEffect, useState } from "react";
import { NavBar } from "antd-mobile";
import { LeftOutlined, UserOutlined } from "@ant-design/icons";
import { Input, Space } from "antd";
import { useHistory } from "react-router-dom";

import store from "../../../store";
import axios from "axios";

function Login() {
  const [phone, setPhone] = useState("");
  const [password, setPassword] = useState("");
  let history = useHistory();
  useEffect(() => {
    store.dispatch({
      type: "footer_hidden",
      hidden: true,
    });
  }, []);

  const handleChange = (key, e) => {
    switch (key) {
      case "phone":
        setPhone(e.target.value);
        break;
      case "password":
        setPassword(e.target.value);
        break;
      default:
        return e.target.value;
    }
  };
  //   登录
  const Login = () => {
    axios
      .get("http://localhost:4000/login/cellphone", {
        params: {
          phone,
          password,
        },
      })
      .then((res) => {
        //   console.log
        if (res.data.code === 200) {
          const token = res.data.token;
          const uid = res.data.account.id;
          localStorage.setItem("token", token);
          localStorage.setItem("uid", uid);
          history.push("/home");
        } else {
          alert("用户名或密码错误");
        }
      });
  };
  {
    /* 17837108775, yiyu.151386*/
  }
  return (
    <div>
      <div>
        <NavBar
          mode="light"
          icon={<LeftOutlined />}
          onLeftClick={() => {
            window.history.back(-1);
            store.dispatch({
              type: "footer_hidden",
              hidden: false,
            });
          }}
        >
          登录
        </NavBar>
      </div>

      <div style={{ width: "80%", marginLeft: "10%", marginTop: "50px" }}>
        <Input
          size="large"
          placeholder="请输入用户名"
          prefix={<UserOutlined />}
          style={{ marginTop: "20px" }}
          onChange={(e) => handleChange("phone", e)}
          //   value=""
        />
        <Input.Password
          placeholder="请输入密码"
          size="large"
          style={{ marginTop: "30px" }}
          onChange={(e) => handleChange("password", e)}
          //   value=""
        />
      </div>

      <div
        style={{
          marginTop: "40px",
          width: "90%",
          marginLeft: "5%",
          height: "40px",
          textAlign: "center",
          lineHeight: "40px",
          backgroundColor: "red",
          borderRadius: "20px",
        }}
        onClick={() => {
          Login();
        }}
      >
        登录
      </div>
      <div
        style={{
          width: "80%",
          height: "30px",
          marginLeft: "10%",
          marginTop: "10px",
        }}
      >
        <span
          onClick={() => {
            console.log("去注册");
            history.push("/register");
          }}
        >
          新用户注册
        </span>
        <span
          style={{ float: "right" }}
          onClick={() => {
            console.log("忘记密码");
          }}
        >
          忘记密码？
        </span>
      </div>
    </div>
  );
}
export default Login;
